<template>
  <div
    class="search-module module-card"
    :style="{ backgroundColor: module.props.bgColor || '#fff' }"
  >
    <div class="search-input-box">
      <i class="el-icon-search search-icon"></i>
      <input
        v-model="keyword"
        class="search-input"
        :placeholder="module.props.placeholder || '搜索课程/商品/专栏'"
        @input="handleInput"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchBarModule',
  props: ['module'],
  data() {
    return {
      keyword: this.module.props.keyword || '',
    }
  },
  watch: {
    'module.props.keyword'(val) {
      this.keyword = val
    }
  },
  methods: {
    handleInput(value) {
      const updatedModule = {
        ...this.module,
        props: {
          ...this.module.props,
          keyword: value,
        }
      }
      this.$emit('update-module', updatedModule)
    }
  }
}
</script>

<style scoped>
.search-module {
  padding: 10px 12px;
  /* 删除之前的固定背景颜色，改由绑定的行内样式控制 */
}

.search-input-box {
  display: flex;
  align-items: center;
  border: 2px solid transparent; /* 透明边框 */
  border-radius: 24px;
  background-color: #fff; /* 保持输入框内部是白色 */
  padding: 6px 12px;
}

.search-icon {
  font-size: 16px;
  color: #999;
  margin-right: 6px;
}

.search-input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  background-color: transparent; /* 输入框透明，显示盒子背景色 */
}
</style>
